<template>
  <div class="endSessionBox">
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="$t('webchat.endSessionTitle')" :visible.sync="info.dialogTableVisible">
        <el-cascader
          popper-class="webchat-finish"
          :placeholder="$t('webchat.chooseEndSessionType')"
          :options="endSessionOpitons"
          filterable
          clearable
          v-model="activeOptions"
        >
        </el-cascader>
        <div v-if="deleteFlag">
          <p class="remarkTitle">{{$t('public.addRemarks')}}</p>
          <textarea class="remark" type="textarea" :placeholder="this.$t('public.pleaseRemark')" v-model.trim="info.remark" rows="3"></textarea>
        </div>
        <div class="tableVisibleBtnBox clearfix">
          <el-button class="tableVisibleBtn primary_btn" @click="endSessionChat()" size="small">{{$t('public.cancel')}}</el-button>
          <el-button type="primary" class="primary_btn tableVisibleBtn" @click="endSessionChat(true, info.remark)" size="small">{{$t('public.confirm')}}</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
  /**
   * EndSessionBox  在线结束会话弹框
   * @author SongPeng
   * @path @/components/business-modules/webchat/WebchatEndSessionBox'
   * @property
   * info 结束会话类型
   * deleteFlag true为快捷关闭设置为无时调用的
   */
  export default {
    name: 'EndSessionBox',
    data () {
       return {
         activeOptions: {}
       }
    },
    props: {
      info: Object,
      deleteFlag: Boolean
    },
    computed: {
      endSessionOpitons () {
        return this.info.endOptionsUl || {}
      }
    },
    methods: {
      endSessionChat (addClack, remark) {
        let option = this.activeOptions[this.activeOptions.length - 1]
        if (this.deleteFlag) {
          this.$emit('endSession', addClack, option, remark, true)
        } else {
          this.$emit('endSession', addClack, option, remark, false)
        }
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .endSessionBox
    position relative
    .tableVisibleBtnBox
      position absolute
      bottom 20px
      right 10px
    .tableVisibleBtn
      display inline-block
    .remark
      margin-top 5px
    .remarkTitle
      margin-top 10px
    textarea
      border 1px solid $c-border1
      border-radius 4px
      resize none
      padding 6px
      width 100%
      color #000000
      box-sizing border-box
    textarea:focus
      border-color $c-main
</style>
<style lang="stylus">
  .endSessionBox
    .el-dialog
      height 287px
      border-radius 4px
    .el-cascader
      width 100%
</style>
